<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#64748b',
                        accent: '#0ea5e9',
                        neutral: '#f8fafc',
                        'neutral-dark': '#1e293b',
                        success: '#10b981',
                        danger: '#ef4444',
                        gold: '#fde68a',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'elegant': '0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1)',
                        'card': '0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
                        'input': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
                        'button': '0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(59, 130, 246, 0.15)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto { content-visibility: auto; }
            .form-input-focus { @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:shadow-lg; }
            .btn-hover { @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300; }
            .gradient-bg { @apply bg-gradient-to-br from-primary/5 to-accent/5; }
            .input-with-icon { @apply w-full pl-12 pr-4 py-3 rounded-xl border border-gray-200 form-input-focus transition-all duration-200 shadow-input; }
            .card-animation { @apply transition-all duration-500 hover:shadow-elegant; }
            .float-animation { animation: float 6s ease-in-out infinite; }
            .shine-animation { animation: shine 4s ease-in-out infinite; }
            .scale-animation { @apply transition-transform duration-300 hover:scale-105; }
            @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
            @keyframes shine { 0% { opacity: 0.3; transform: scale(0.95); } 50% { opacity: 0.8; transform: scale(0.95); } 100% { opacity: 0.3; transform: scale(0.95); } }

            /* 侧边栏样式 */
           .sidebar { @apply fixed top-0 left-0 bottom-0 w-64 bg-white shadow-lg z-30 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out; }
           .sidebar.open { @apply translate-x-0; }
           .sidebar-item { @apply flex items-center gap-3 px-4 py-3 rounded-lg text-neutral-dark hover:bg-primary/10 hover:text-primary transition-all duration-200 cursor-pointer; }
           .sidebar-item.active { @apply bg-primary/10 text-primary font-medium; }
           .sidebar-submenu { @apply pl-10 py-1 hidden; }
           .sidebar-submenu.open { @apply block; }
           .sidebar-subitem { @apply flex items-center gap-2 px-4 py-2 rounded-lg text-neutral-dark hover:bg-primary/10 hover:text-primary transition-all duration-200 cursor-pointer text-sm; }
           .sidebar-subitem.active { @apply bg-primary/10 text-primary font-medium; }

            /* 主内容样式 */
           .main-content { @apply ml-0 lg:ml-64 transition-all duration-300 min-h-screen; }
           .page-content { @apply p-4 md:p-6 lg:p-8; }

            /* 表格样式 */
           .data-table { @apply w-full border-collapse; }
           .data-table th { @apply px-4 py-3 text-left text-sm font-medium text-secondary border-b border-gray-200; }
           .data-table td { @apply px-4 py-3 text-sm text-neutral-dark border-b border-gray-100; }
           .data-table tr:hover { @apply bg-gray-50; }

            /* 按钮样式 */
           .btn { @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 btn-hover; }
           .btn-primary { @apply bg-primary text-white shadow-button; }
           .btn-secondary { @apply bg-gray-200 text-neutral-dark; }
           .btn-success { @apply bg-success text-white; }
           .btn-danger { @apply bg-danger text-white; }

            /* 顶部导航栏 */
           .top-nav { @apply bg-white shadow-sm fixed top-0 right-0 left-0 lg:left-64 z-20 transition-all duration-300; }
           .content-wrapper { @apply pt-16 pb-20; }

            /* 美化添加的样式 */
           .nav-item { @apply relative p-2 rounded-full hover:bg-gray-100 transition-colors duration-200; }
           .badge { @apply absolute -top-1 -right-1 w-4 h-4 flex items-center justify-center rounded-full text-xs font-bold; }
           .search-container { @apply relative max-w-md w-full; }
           .search-input { @apply w-full pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary; }

            /* 教师端专属样式 */
           .teacher-card { @apply bg-white rounded-xl shadow-card p-6 border-l-4 border-primary transition-all duration-300 hover:shadow-elegant; }
           .course-card { @apply bg-white rounded-xl shadow-card p-5 border-l-4 border-accent transition-all duration-300 hover:shadow-elegant; }
           .student-row { @apply hover:bg-primary/5 transition-colors duration-200; }
        }
    </style>
</head>
<body class="font-inter bg-gray-50">
    <!-- 侧边栏导航 -->
    <div class="sidebar" id="sidebar">
        <div class="p-4 border-b border-gray-100">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold text-primary">班级信息管理系统</h2>
                <button class="lg:hidden text-neutral-dark" id="closeSidebar">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>

        <div class="p-4">
            <ul class="space-y-1">
                <!-- 个人信息 -->
                <li class="sidebar-item" data-target="personal-info">
                    <a href="{{ url_for('teacher.teacher_index') }}" class="flex items-center gap-3 w-full">
                        <i class="fa fa-user w-5 text-center"></i>
                        <span>个人信息</span>
                    </a>
                </li>

                <!-- 班级管理（新增） -->
                <li class="sidebar-item has-submenu" data-target="class-management">
                    <div class="flex items-center gap-3 w-full justify-between cursor-pointer">
                        <div class="flex items-center gap-3">
                            <i class="fa fa-graduation-cap w-5 text-center"></i>
                            <span>班级管理</span>
                        </div>
                        <i class="fa fa-chevron-down text-xs transition-transform duration-200"></i>
                    </div>
                    <ul class="sidebar-submenu mt-1" id="class-submenu">
                        <li class="sidebar-subitem" data-target="class-info">
                            <a href="{{ url_for('teacher.teacher_class_message') }}" class="flex items-center gap-2 w-full">
                                <i class="fa fa-list w-4 text-center"></i>
                                <span>班级信息</span>
                            </a>
                        </li>
                    </ul>
                </li>

                <!-- 选课学生管理（原学生管理） -->
                <li class="sidebar-item" data-target="selected-students">
                    <a href="{{ url_for('teacher.teacher_student') }}" class="flex items-center gap-3 w-full">
                        <i class="fa fa-book w-5 text-center"></i>
                        <span>选课学生管理</span>
                    </a>
                </li>

                <!-- 课程查看 -->
                <li class="sidebar-item" data-target="course-view">
                    <a href="{{ url_for('teacher.teacher_course') }}" class="flex items-center gap-3 w-full">
                        <i class="fa fa-book-open w-5 text-center"></i>
                        <span>课程查看</span>
                    </a>
                </li>

                <!-- 教学计划 -->
                <li class="sidebar-item" data-target="teaching-plan">
                    <a href="{{ url_for('teacher.teacher_date') }}" class="flex items-center gap-3 w-full">
                        <i class="fa fa-calendar-alt w-5 text-center"></i>
                        <span>教学日历</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-100">
            <div class="flex items-center gap-3">
                <img src="https://picsum.photos/100/100" alt="教师头像" class="w-10 h-10 rounded-full object-cover">
                <div>
                    <p class="text-sm font-medium">{{session.username}}</p>
                    <p class="text-xs text-secondary">{{ session.studentId }}</p>
                </div>
                <button id="logout" class="ml-auto text-neutral-dark hover:text-danger transition-colors" onclick="handleLogout()">
                    <i class="fa fa-sign-out-alt"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 顶部导航栏 -->
    <div class="top-nav h-16">
        <div class="flex items-center justify-between h-full px-4 lg:px-6">
            <div class="flex items-center gap-4">
                <button class="lg:hidden text-neutral-dark" id="openSidebar">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>

            <div class="flex items-center gap-4">
                <button class="nav-item relative">
                    <i class="fa fa-bell text-xl"></i>
                    <span class="badge bg-danger text-white">3</span>
                </button>

                <button class="nav-item relative">
                    <i class="fa fa-envelope text-xl"></i>
                    <span class="badge bg-primary text-white">5</span>
                </button>

                <div class="h-8 border-r border-gray-200 hidden md:block"></div>

                <div class="flex items-center gap-3">
                    <img src="https://picsum.photos/100/100" alt="教师头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
                    <div class="hidden md:block">
                        <p class="text-sm font-medium">{{ session.username }}</p>
                        <p class="text-xs text-secondary">{{ session.studentId }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <div class="content-wrapper">
            {% block content %}{% endblock %}
        </div>
    </div>

    <script>
        // 侧边栏菜单切换
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const openSidebarBtn = document.getElementById('openSidebar');
            const closeSidebarBtn = document.getElementById('closeSidebar');
            const sidebarItems = document.querySelectorAll('.sidebar-item');
            const submenuItems = document.querySelectorAll('.sidebar-subitem');
            const hasSubmenuItems = document.querySelectorAll('.has-submenu');

            // 移动端侧边栏控制
            openSidebarBtn.addEventListener('click', function() {
                sidebar.classList.add('open');
                document.body.style.overflow = 'hidden'; // 防止背景滚动
            });

            closeSidebarBtn.addEventListener('click', function() {
                sidebar.classList.remove('open');
                document.body.style.overflow = 'auto';
            });

            // 子菜单展开/折叠
            hasSubmenuItems.forEach(item => {
                const toggleBtn = item.querySelector('.flex.justify-between');
                const submenu = item.querySelector('.sidebar-submenu');
                const chevron = toggleBtn.querySelector('.fa-chevron-down');

                toggleBtn.addEventListener('click', () => {
                    const isOpen = submenu.classList.contains('open');

                    // 关闭其他所有子菜单
                    document.querySelectorAll('.sidebar-submenu').forEach(menu => {
                        menu.classList.remove('open');
                        menu.previousElementSibling.querySelector('.fa-chevron-down').classList.remove('rotate-180');
                    });

                    // 切换当前子菜单状态
                    if (isOpen) {
                        submenu.classList.remove('open');
                        chevron.classList.remove('rotate-180');
                    } else {
                        submenu.classList.add('open');
                        chevron.classList.add('rotate-180');
                    }
                });
            });

            // 高亮当前页面菜单项
            function highlightCurrentPage() {
                const currentPath = window.location.pathname;

                // 移除所有活动状态
                sidebarItems.forEach(item => item.classList.remove('active'));
                submenuItems.forEach(item => item.classList.remove('active'));

                // 设置活动状态
                sidebarItems.forEach(item => {
                    const target = item.getAttribute('data-target');
                    if (currentPath.includes(target)) {
                        item.classList.add('active');

                        // 如果是有子菜单的项，展开子菜单
                        const submenu = item.querySelector('.sidebar-submenu');
                        const chevron = item.querySelector('.fa-chevron-down');
                        if (submenu) {
                            submenu.classList.add('open');
                            chevron.classList.add('rotate-180');
                        }
                    }
                });

                // 检查子菜单项
                submenuItems.forEach(item => {
                    const target = item.getAttribute('data-target');
                    if (currentPath.includes(target)) {
                        item.classList.add('active');

                        // 同时高亮父菜单项
                        const parentItem = item.closest('.has-submenu');
                        if (parentItem) {
                            parentItem.classList.add('active');

                            // 展开子菜单
                            const submenu = parentItem.querySelector('.sidebar-submenu');
                            const chevron = parentItem.querySelector('.fa-chevron-down');
                            submenu.classList.add('open');
                            chevron.classList.add('rotate-180');
                        }
                    }
                });
            }

            // 初始化高亮当前页面
            highlightCurrentPage();
        });
        // 退出登录
        function handleLogout() {
            if (confirm('确认退出当前账号？')) {
                fetch('/teacher/logout', { method: 'POST' })
                    .then(response => {
                        if (response.ok) {
                            localStorage.removeItem('teacher_token');
                            window.location.href = '/login';
                        } else {
                            throw new Error('退出失败');
                        }
                    })
                    .catch(error => {
                        console.error('退出登录错误:', error);
                        alert('退出登录失败，请重试');
                    });
            }
        }

        // 显示提示消息
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg transition-opacity duration-300 ${
                type === 'success' ? 'bg-success text-white' :
                type === 'error' ? 'bg-danger text-white' :
                type === 'warning' ? 'bg-warning text-white' : 'bg-primary text-white'
            }`;
            toast.innerHTML = `
                <div class="flex items-center gap-2">
                    <i class="fa ${type === 'success' ? 'fa-check' : type === 'error' ? 'fa-exclamation' : 'fa-info'}"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(toast);

            // 3秒后自动消失
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 3000);
        }
    </script>
</body>
</html>